/*--------------------------------AUI设计规范--------------------------------*/
// 主背景色
$background-color: #f0f2f5;

// 主色
$color-primary: #6c92fa;
$color-primary-dark: #5b7ede;
$color-primary-light: #86a6fc;
$color-white: #ffffff;
$color-black: #000000;

// 状态色
$color-success: #7adfa0;
$color-error: #f45c5e;
$color-warm: #ffd929;

// 告警色
$alarm-color-critical: #f45c5e;
$alarm-color-major: #fa8e5a;
$alarm-color-minor: #fdca5a;
$alarm-color-clean: #7adfa0;
$alarm-color-info: #63b6f7;

// 文字
$text-color-link: $color-primary-dark;
$text-color-primary: #282b33; //主文本
$text-color-secondary: #6c7280; //副本文
$text-color-tertiary: #b8becc; //disable, placeholder和其他辅助文本
$text-color-error: #f45c5e;
$text-color-dark-primary: #d4d9e6; // 特殊场景文字

// 边框
$border-width: 1px;
$border-radius: 1px;
$border-color: #b8becc; //线框色
$border-color-disabled: #e6ebf5; //线框禁用色

// 分割线
$separate-line-color: #e6ebf5; //线框色

// 选中
$selection-color: $color-white;
$selection-bgcolor: $color-primary;

@import 'projects/components/src/style/themes/index';

/*-----------------------------------文本----------------------------------------*/
// 一级标题
.aui-title-1,
h1 {
  font-size: 0.2rem;
  color: $text-color;
  font-weight: 600;
  line-height: 1.5;
}

// 二级标题/L按钮
.aui-title-2,
h2 {
  font-size: 0.16rem;
  color: $text-color;
  font-weight: 600;
  line-height: 1.5;
}

// 三级标题/正文/S按钮
.aui-title-3,
h3 {
  font-size: 0.14rem;
  color: $text-color;
  font-weight: 600;
  line-height: 1.5;
}

// 主文本
.aui-text,
p {
  color: $text-color-secondary;
}

// 副本文
.aui-text-label {
  color: $text-color-secondary;
}

//描述, disable, placeholder和其他辅助文本
.aui-text-desc,
.aui-text-help {
  color: $text-color-tertiary;
}

//辅助信息/表头
.aui-text-help-sm {
  font-size: 0.12rem;
  color: $text-color-tertiary;
}

// 数字规范
.aui-number-1 {
  font-size: 0.4rem;
}

.aui-number-2 {
  font-size: 0.32rem;
}

.aui-number-3 {
  font-size: 0.24rem;
}

.aui-number-4 {
  font-size: 0.18rem;
}

.aui-number-5 {
  font-size: 0.14rem;
}

/*-----------------------------------间距----------------------------------------*/
//横向间距 xs:4 | sm:8 | md:16 | lg:24 | xl:32
.aui-gutter-row-xs {
  margin-right: 4px;
}

.aui-gutter-row-sm {
  margin-right: 8px;
}

.aui-gutter-row-md {
  margin-right: 16px;
}

.aui-gutter-row-lg {
  margin-right: 24px;
}

.aui-gutter-row-xl {
  margin-right: 32px;
}

// @TODO待梳理 纵向间距 xs:4 | sm:8 | md:16 | lg:24 | xl:32
.aui-gutter-column-xs {
  margin-bottom: 4px;
}

.aui-gutter-column-sm {
  margin-bottom: 8px;
}

.aui-gutter-column-md {
  margin-bottom: 16px;
}

.aui-gutter-column-lg {
  margin-bottom: 24px;
}

.aui-gutter-column-xl {
  margin-bottom: 32px;
}

/*-----------------------------------容器----------------------------------------*/
// 容器通用内边距
.aui-padding {
  padding: 32px;
}

// 页面 TODO只处理第一个
.aui-page {
  padding: 32px;
  background: $background-color;

  // top:24, bottom: 20;
  > .aui-header-1,
  > h1 {
    margin-top: -13px;
    margin-bottom: 15px;
  }

  // top:24, bottom: 20;
  > .aui-header-2,
  > h2 {
    margin-top: -13px;
    margin-bottom: 16px;
  }

  // top:20, bottom: 20;
  > .aui-nav {
    margin-top: -16px;
    margin-bottom: 16px;
  }
}

// 高度100%页面
.aui-fullpage {
  @extend .aui-page;
  display: flex;
  flex-direction: column;
  height: 100%;

  > .aui-block {
    flex-grow: 1;
  }
}

// 预览区
.aui-overview {
  padding: 32px;
  background: $color-black;
}

// 容器块
.aui-block {
  padding: 32px;
  background: $color-white;

  // top:32, bottom: 24;
  > .aui-header-1,
  > h1 {
    margin-top: -5px;
    margin-bottom: 19px;
  }

  // top:32, bottom: 24;
  > .aui-header-2,
  > h2 {
    margin-top: -4px;
    margin-bottom: 20px;
  }
}

// 一级标题区
.aui-header-1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
}

// 二级标题区
.aui-header-2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 24px;
}

// 导航区
.aui-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 21px;
}

// 操作区
.aui-operation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

// block堆叠overview
.aui-stack {
  margin-top: -88px;
}
